<template>
  <div class="footer">
    <div class="content">
      <div class="tel">
        <div class="place">
          <span class="servie">联系我们</span>
          <h2 class="phone">xxxx-xxxxxxx</h2>
        </div>
      </div>
      <div class="link" v-for="(item, index) in configList" :key="index">
        <h3 class="title" :title="item.name">{{ item.name }}</h3>
        <ul class="list">
          <li
            v-for="i in item.children"
            :key="i.value"
            @click="toLink(i)"
            :title="i.name"
          >
            {{ i.name }}
          </li>
        </ul>
      </div>
      <div class="attention">
        <h3 class="title">关注我们</h3>
        <img src="@/assets/image/govern.png" />
        <p style="color: #dadada">微信公众号</p>
      </div>
      <div class="about">
        <h3 class="title">关于我们</h3>
        <ul style="line-height: 30px">
          <li>邮箱：tojustinzyh@163.com</li>
          <li>声明：如涉及侵权或不良信息，联系我们，火速下架。</li>
        </ul>
      </div>
    </div>
    <div class="copyRight">
      <div>
        <span>版权所有</span>
        <router-link class="link" to="/">粤110</router-link>
        <span>copyright @2020</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  data () {
    return {
      configList: [
        {
          id: 1296,
          name: "业务范畴",
          path: "www.baidu.com",
          children: [
            {
              name: "pc端",
              value: "pc",
            },
            {
              name: "公众号",
              value: "global",
            },
            {
              name: "微信小程序",
              value: "weixin",
            },
            {
              name: "数据可视化",
              value: "bigdata",
            },
          ],
        },
        {
          newsId: 1297,
          name: "技术架构",
          path: "www.baidu.com",
          children: [
            {
              name: "Vue(SPA+SSR)",
              valueue: "vue",
            },
            {
              name: "React(SPA+SSR)",
              value: "react",
            },
            {
              name: "JQuery",
              value: "jquery",
            },
            {
              name: "Uni-App",
              value: "uniapp",
            },
            {
              name: "Flutter",
              value: "flutter",
            },
          ],
        },
        {
          newsId: 1299,
          name: "UI框架",
          path: "www.baidu.com",
          children: [
            {
              name: "Element",
              value: "element",
            },
            {
              name: "IView",
              value: "iview",
            },
            {
              name: "ant-design",
              value: "antd",
            },
            {
              name: "Bootstrap",
              value: "bootstrap",
            },
            {
              name: "Layui",
              value: "layui",
            },
          ],
        },
        {
          newsId: 1300,
          name: "数据服务",
          path: "www.baidu.com",
          children: [
            {
              name: "Nest.js+Mysql",
              value: "nest",
            },
            {
              name: "Koa2.js+Mysql",
              value: "koa",
            },
            {
              name: "Spring-Boot+MySql",
              value: "springboot",
            },
          ],
        },
      ],
    };
  },
  computed: { ...mapState(["homeData"]) },

  methods: {
    open () {
      window.open("http://www.beian.miit.gov.cn/");
    },
  },
};
</script>

<style lang="scss" scoped>
.footer {
  .content {
    min-height: 280px;
    padding-top: 48px;
    background: #2b2d2e;
    display: flex;
    color: #fff;
    font-size: 12px;
    .tel {
      width: 28%;
      height: 0;
      margin-right: 70px;
      border-bottom: 78px #393b3c solid;
      border-right: transparent 35px solid;
      border-left: none;
      position: relative;
      .place {
        position: absolute;
        right: 35px;
        margin-top: 19px;
        .servie {
          font-size: 12px;
          color: #939393;
        }
        .phone {
          font-size: 22px;
        }
      }
    }
    @media screen and (max-width: 1400px) {
      .tel {
        width: 22%;
      }
    }
    .title {
      font-size: 16px;
      position: relative;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-left: 15px;
      height: 40px;
      line-height: 40px;
      margin-bottom: 18px;
      border-bottom: 1px solid #fff;
      &:after {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        content: '';
        width: 3px;
        height: 16px;
        background: linear-gradient(
          129deg,
          rgba(32, 152, 255, 1) 0%,
          rgba(60, 207, 255, 1) 100%
        );
      }
    }
    .list {
      line-height: 30px;
      color: #dadada;
      li {
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
      }
    }
    .about {
      width: 300px;
    }
    .attention,
    .link {
      width: 100px;
      margin-right: 64px;

      img {
        width: 78px;
        height: 78px;
      }
    }
  }
  .copyRight {
    background-color: #1f1f1f;
    color: #6b6b6b;
    text-align: center;
    line-height: 48px;
    font-size: 12px;
    vertical-align: middle;
    span {
      vertical-align: middle;
    }
    p {
      line-height: 22px;
      padding-top: 15px;
      font-size: 16px;
      font-weight: 900;
    }
    .link {
      color: #2097ff;
      font-style: normal;
      cursor: pointer;
    }
  }
}
</style>

